<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UploadList from '@/components/app/uploadList.vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import labels from '@/components/app/label.vue'
import { toRaw } from '@vue/reactivity'
import { momentsAdd } from '@/api'
import { ElMessage } from 'element-plus'
const back = () => {
	router.back()
}
const route = useRoute()
const getUploadImg = (val) => {
	ruleForm.content.image_list.push(val.url)
}
const getVideoUrl = (val) => {
	ruleForm.content.video_url = val.url
}
const getlinkImageurl = () => {
	ruleForm.content.link_imageurl = val.url
}
const delVideo = () => {
	ruleForm.content.video_url = ''
}
const dialogVisible = ref(false)
const isLoading = ref(false)
const ruleFormRef = ref()
const chooseDialogue = ref()
const selectStaffValue = ref([])
const typeshow = ref(1)
const openingDialogName = ref('')
const selectStaffDay = ref([])
const TestRef=ref()
const delImg = (img) => {
	ruleForm.content.image_list = ruleForm.content.image_list.filter((item) => {
		return img != item
	})
}
const showDialogue = (type, name, title) => {
	typeshow.value = type
	console.log('弹窗', typeshow.value)
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)
				console.log(name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			if (title == 'staffidTime') {
				openingDialogName.value = 'staffidTime'
				var arr = toRaw(form.value.staffidTime)
				console.log('5555', name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			break
		case 'tag':
			openingDialogName.value = name
			// var arr = toRaw(form.value[name])
			var dataArr = []
			// arr.forEach((item) => {
			// 	dataArr.push(item)
			// })
			TestRef.value.tableshow({show:true})
			break
	}
}
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
const setUp = ref(false)
const ruleForm = reactive({
	name: '',
	type: 1,
	staffs: [],
	customer_type: 1,
	tags: '',
	text: '',
	content: {
		type: 1,
		image_list: [],
		video_url: '',
		link_url: '',
		link_title: '',
		link_imageurl: '',
		link_desc: ''
	},
	send_status: 1,
	send_time: {
		date: '',
		time: ''
	}
})

const urlPort1 = (rule, value, callback) => {
	console.log(reg.test(value))
	let reg = /(http|https):\/\/([\w.]+\/?)\S*/
	console.log()
	if (value !== '' && reg.test(value) === false) {
		callback(new Error('请输入正确的链接地址'))
	} else {
		callback()
	}
}
const rules = reactive({
	name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
	type: [
		{
			required: true,
			message: '朋友圈类型不能为空',
			trigger: 'change'
		}
	],
	staffs: [
		{
			required: true,
			message: '成员不能为空',
			trigger: 'change'
		}
	],
	url: [
		{
			required: true,
			validator: urlPort1,
			message: urlPort1.Error,
			trigger: 'blur'
		}
	],
	customer_type: [
		{
			required: true,
			message: '可见客户不能为空',
			trigger: 'change'
		}
	],
	send_status: [
		{
			required: true,
			message: '发布方式不能为空',
			trigger: 'change'
		}
	]
})

const submitForm = async (formEl) => {
	console.log(ruleForm)
	if (!formEl) return
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			let obj = { send_time: '', content: {} }
			console.log('submit!')
			console.log(ruleForm)
			for (const key in ruleForm) {
				if (ruleForm[key] != '') {
					if (key === 'send_time') {
						for (const k in ruleForm[key]) {
							if (ruleForm[key][k] != '') {
								if (k === 'date') {
									const year = ruleForm[key][k].getFullYear()
									const mouth =
										ruleForm[key][k].getMonth() > 9
											? ruleForm[key][k].getMonth() + 1
											: '0' + (ruleForm[key][k].getMonth() + 1)
									const day =
										ruleForm[key][k].getDate() > 9 ? ruleForm[key][k].getDate() : '0' + ruleForm[key][k].getDate()
									obj[key] += year + '-' + mouth + '-' + day
								} else {
									const hour =
										ruleForm[key][k].getHours() > 9 ? ruleForm[key][k].getHours() : '0' + ruleForm[key][k].getHours()
									const minutes =
										ruleForm[key][k].getMinutes() > 9
											? ruleForm[key][k].getMinutes() + 1
											: '0' + (ruleForm[key][k].getMinutes() + 1)
									const seconds =
										ruleForm[key][k].getSeconds() > 9
											? ruleForm[key][k].getSeconds()
											: '0' + ruleForm[key][k].getSeconds()
									obj[key] += ' ' + hour + ':' + minutes + ':' + seconds
								}
							}
						}
					} else if (key === 'content') {
						for (const k in ruleForm[key]) {
							if (ruleForm[key][k] != '') {
								obj[key][k] = ruleForm[key][k]
							}
						}
					} else {
						obj[key] = ruleForm[key]
					}
				}
			}
			console.log(obj)
			
			if (!obj.content.image_list){
				if(obj.content.type == 1){
					ElMessage.error('请上传图片')
					return
				}
				
				
			}
			isLoading.value = true
			const res = await momentsAdd(obj)
			isLoading.value = false
			if (res.status === 'success') {
				ElMessage.success('添加成功')
				setTimeout(() => {
					router.push({name:'WorkMoment'})
				}, 300)
			} else {
				ElMessage.error('添加失败')
			}
		} else {
			console.log('error submit!', fields)
		}
	})
}
// 选择员工弹窗

const getChooseData = (val) => {
	if (typeshow.value == 1) {
		var Type = toRaw(val)
		selectStaffValue.value = Type
		ruleForm.staffs = val.map((item) => {
			return item.id
		})
	} else if (typeshow.value == 2) {
		var Type = toRaw(val)
		console.log(val)
		ruleForm.tags = val.map((item) => {
			return item.id
		})
		selectStaffDay.value = Type
	}
}
// 强制刷新
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
}
const labeldataapi=(val)=>{
	console.log(val)
	selectStaffDay.value=val.list
	ruleForm.tags=val.id
}
const router = useRouter()
</script>
<template>
	<div class="container">
		<el-scrollbar max-height="100%">
			<div class="heaeder">
				<div @click="back" class="back">
					<el-icon style="margin-right: 5px"><Back /></el-icon> 发表朋友圈
				</div>
			</div>
			<div class="monent-create">
				<div class="monent-create-title">发表企业朋友圈流程</div>
				<el-divider style="margin: 12px 0" />
				<div class="monent-create-alert">
					<el-icon style="color: #ff8f16; margin-right: 5px; font-size: 16px"><BellFilled /></el-icon>
					朋友圈限制：每位客户每天可接收 3 条企业发表的朋友圈内容，电脑上暂不支持发送，需要员工前往手机版企微操作
				</div>
				<div class="tutorial-container">
					<div class="tutorial-item"><strong>管理员</strong> <span> - 创建朋友圈任务</span></div>
					<img
						class="arrow-icon"
						src="../../../../assets/img/img/qiwei-moment_icon__arrow-right.4fdfb4a830b9.png"
					/>
					<div class="tutorial-item"><strong>员工</strong> <span> - 接收“客户朋友圈”推送</span></div>
					<img
						class="arrow-icon"
						src="../../../../assets/img/img/qiwei-moment_icon__arrow-right.4fdfb4a830b9.png"
					/>
					<div class="tutorial-item"><strong>员工</strong> <span> - 打开后一键发送</span></div>
					<el-tooltip placement="left-start" effect="light">
						<template #content>
							<div style="padding: 8px">
								<img
									style="width: 650px; height: 295px"
									src="http://www.crmuu.com/qiwei-moment_banner__tutorial.6685917cf7d9.png"
								/>
							</div>
						</template>
						<span class="popover-title">查看标例</span>
					</el-tooltip>
				</div>
				<div class="monent-create-title">编辑朋友圈</div>
				<el-divider style="margin: 12px 0" />
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					label-width="120px"
					class="demo-ruleForm"
					status-icon
				>
					<el-form-item label="任务名称：" prop="name">
						<el-input style="width: 328px; height: 36px" v-model="ruleForm.name" placeholder="请输入任务名称" />
					</el-form-item>
					<el-form-item style="margin: 0" label="朋友圈类型：" prop="type">
						<el-radio-group v-model="ruleForm.type">
							<el-radio :label="1">企业发表</el-radio>
							<el-radio :label="2">个人发表</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<p class="title">
							{{ ruleForm.type === 1 ? '创建后通过手机端-“客户朋友圈”下发任务' : '创建后通过“企微提醒”下发任务' }}
						</p>
					</el-form-item>
					<el-form-item label="发表成员：" prop="staffs">
						<el-select
							v-model="ruleForm.staffs"
							remote
							multiple
							reserve-keyword
							remote-show-suffix
							:suffix-transition="false"
							placeholder="请选择账号"
							@focus="showDialogue('1', 'staff', 'staffid')"
						>
							<el-option v-for="item in selectStaffValue" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="可见的客户：" prop="customer_type">
						<el-radio-group :disabled="ruleForm.type === 2" v-model="ruleForm.customer_type">
							<el-radio :label="1">全部客户</el-radio>
							<el-radio :label="2">筛选客户</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-show="ruleForm.customer_type === 2" style="margin: 0 0 18px 42px" label="标签:">
						<el-select
							v-model="ruleForm.tags"
							remote
							multiple
							reserve-keyword
							remote-show-suffix
							:suffix-transition="false"
							placeholder="请选择标签"
							@focus="showDialogue('2', 'tag', 'tagid')"
						>
							<el-option v-for="item in selectStaffDay" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
						
					</el-form-item>
					<el-form-item v-if="selectStaffDay">
						<div><el-tag v-for="item in selectStaffDay" :key="item.id" style="margin-right: 3px;">{{ item.name }}</el-tag></div>
					</el-form-item>
					<el-form-item>
						<div class="ame-alert-icon-box">
							将发给已选员工的
							<el-button style="margin-bottom: 2px" type="primary" text="primary" link>查看</el-button>
							个客户朋友圈中
						</div>
					</el-form-item>
					<el-form-item label="消息内容1:">
						<el-input
							style="width: 735px"
							v-model="ruleForm.text"
							maxlength="1000"
							rows="8"
							resize="none"
							placeholder="请输入消息内容"
							show-word-limit
							type="textarea"
						/>
					</el-form-item>
					<el-form-item label="消息内容2:">
						<el-radio-group v-model="ruleForm.content.type">
							<el-radio :label="1">图片</el-radio>
							<el-radio :label="2">视频</el-radio>
							<el-radio :label="3">图文链接</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item style="margin: 0">
						<div class="mess-content">
							<div class="img-list" v-show="ruleForm.content.type === 1">
								<div v-for="(item, index) in ruleForm.content.image_list" :key="index" class="img-item">
									<img class="img" :src="item" alt="" />
									<img
										@click="delImg(item)"
										class="del-icon"
										src="../../../../assets/img/img/data-subscribe_chacha.4c82db3e17ca.png"
										alt=""
									/>
								</div>
								<UploadList
									:imgList="ruleForm.content.image_list"
									v-show="ruleForm.content.type === 1"
									:uploadType="{ type: 'image', multiple: true, num: 9 }"
									text="添加图片"
									@getImg="getUploadImg($event, val)"
								/>
							</div>
							<div v-show="ruleForm.content.type === 2">
								<div class="vide-item" v-show="ruleForm.content.video_url">
									<video v-show="ruleForm.content.video_url" :src="ruleForm.content.video_url"></video>
									<img
										@click="delVideo()"
										class="del-icon"
										src="../../../../assets/img/img/data-subscribe_chacha.4c82db3e17ca.png"
										alt=""
									/>
								</div>

								<UploadList
									:uploadType="{ type: 'video', multiple: false, num: 0 }"
									v-show="!ruleForm.content.video_url"
									text="添加视频"
									@getImg="getVideoUrl($event, val)"
								/>
							</div>

							<div v-show="ruleForm.content.type === 3">
								<div class="radar-row-title">链接地址：</div>
								<el-input
									style="width: 552px"
									v-model="ruleForm.content.link_url"
									class="w-50 m-2"
									size="large"
									placeholder="链接地址请以http或https开头"
								/>
								<div style="margin-top: 24px; margin-bottom: 12px" class="radar-row-title">
									高级设置： <el-switch v-model="setUp" /><span
										style="font-weight: 400; color: #262626; margin-left: 8px"
										>{{ setUp ? '已开启' : '未开启' }}</span
									>
								</div>
								<div v-show="setUp" class="advanced-inputbox">
									<div class="advanced-row">
										链接标题：
										<el-input
											style="width: 50%; height: 36px"
											v-model="ruleForm.content.link_title"
											maxlength="30"
											show-word-limit
											placeholder="请输入链接标题"
										/>
									</div>
									<div class="advanced-row">
										链接描述：
										<el-input
											style="width: 50%; height: 36px"
											v-model="ruleForm.content.link_desc"
											placeholder="请输入链接描述"
										/>
									</div>
									<div class="advanced-row" style="align-items: flex-start">
										链接封面：<UploadList text="上传图片" @getImg="getlinkImageurl($event, val)" />
									</div>
								</div>
							</div>
						</div>
					</el-form-item>
					<el-form-item v-show="ruleForm.content.type != 3">
						<p class="title">
							{{
								ruleForm.content.type === 1
									? '因企业微信限制，图片长宽建议不超过1440x1080，大小不超过10M'
									: '添加视频未选择任何文件因企业微信限制，视频建议不超过1280x720，帧率30FPS，视频码率1.67 Mbps，最长不超过30S，最大不超过10MB'
							}}
						</p>
					</el-form-item>
					<div class="monent-create-title">高级设置</div>
					<el-divider style="margin: 12px 0" />
					<el-form-item style="margin: 0" label="朋友圈类型：" prop="send_status">
						<el-radio-group v-model="ruleForm.send_status">
							<el-radio :label="1">立即发送</el-radio>
							<el-radio :label="2">定时发送</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-show="ruleForm.send_status === 2" style="margin-top: 15px">
						<el-date-picker v-model="ruleForm.send_time.date" type="date" placeholder="选择日期" />
						<el-time-picker v-model="ruleForm.send_time.time" placeholder="请输入时间" />
					</el-form-item>
					<div class="btn-box">
						<el-button @click="submitForm(ruleFormRef)" :loading="isLoading" class="send-btn" type="primary"
							>通知成员发送</el-button
						>
					</div>
				</el-form>
			</div>
		</el-scrollbar>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		<labels ref="TestRef" :labeldataapi="labeldataapi" @getChooseData="getChooseData($event, val)"></labels>
	</div>
</template>

<style lang="scss" scoped>
.title {
	color: rgba(0, 0, 0, 0.45);
}
.ame-alert-icon-box {
	min-height: 36px;
	padding: 8px 16px;
	background-color: #f1f9ff;
	font-size: 14px;
	color: #595959;
}
.container {
	padding: 16px;
	height: calc(100vh - 160px);
	:deep(.el-textarea__inner) {
		background-color: #fafafa;
	}

	.heaeder {
		width: 100%;
		background-color: #fff;
		padding: 15px;
		border-bottom: 1px solid #e8e8e8;
		.back {
			display: flex;
			align-items: center;
			cursor: pointer;
			color: #000000d9;
			font-weight: 600;
		}
	}
	.monent-create {
		margin-top: 16px;
		padding: 24px;
		background-color: #fff;
		.btn-box {
			margin-top: 40px;
			.send-btn {
				width: 142px;
				height: 40px;
				border-radius: 2px;
			}
		}
		.mess-content {
			padding: 20px;
			width: 735px;
			background: #fbfbfb;
			border-radius: 2px;
			border: 1px solid #eee;
			box-sizing: border-box;
			.vide-item {
				position: relative;
				display: flex;
				justify-content: center;
				width: 120px;
				border: 1px solid #ccc;
				margin-right: 10px;
				video {
					width: 80%;
					height: 100%;
				}
				.del-icon {
					position: absolute;
					top: -8px;
					right: -6px;
					width: 14px;
					cursor: pointer;
				}
			}
			.img-item {
				position: relative;
				width: 120px;
				height: 120px;
				margin-right: 10px;
				.img {
					width: 100%;
					height: 100%;
				}
				.del-icon {
					position: absolute;
					top: -2px;
					right: -5px;
					width: 14px;
					cursor: pointer;
				}
			}
			.img-list {
				max-width: 100%;
				display: flex;
				flex-wrap: wrap;
			}
			.advanced-inputbox {
				color: rgba(0, 0, 0, 0.85);
				.advanced-row {
					display: flex;
					align-items: center;
					margin-bottom: 16px;
				}
			}
			.radar-row-title {
				display: flex;
				align-items: center;
				font-weight: 700;
				color: rgba(0, 0, 0, 0.85);
				position: relative;
			}
			.radar-row-title:before {
				content: '';
				width: 3px;
				height: 12px;
				background: #1890ff;
				position: absolute;
				left: -7px;
				top: 10px;
			}
		}
		.monent-create-title {
			font-size: 15px;
			font-weight: 700;
			color: #262626;
		}
		.monent-create-alert {
			display: flex;
			align-items: center;
			padding: 10px 16px;
			background-color: #fff6e3;
			min-height: 40px;
			line-height: 20px;
			color: #595959;
			font-size: 14px;
			color: #ad4e00;
		}
		.tutorial-container {
			display: flex;
			-webkit-box-pack: start;
			justify-content: flex-start;
			-webkit-box-align: center;
			align-items: center;
			width: 840px;
			height: 102px;
			margin: 16px 0 32px 0;
			background: #fcfdff;
			border-radius: 2px;
			border: 1px solid #f4f9ff;
			padding: 22px 20px;
			.tutorial-item {
				display: -webkit-box;
				display: flex;
				-webkit-box-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				align-items: center;
				height: 58px;
				padding: 0 22px;
				background: #eff8ff;
				border-radius: 2px;
				border: 2px solid #8ac7ff;
				font-size: 13px;
				color: #000;
			}
			.popover-title {
				align-self: flex-end;
				margin-left: 16px;
				font-size: 14px;
				color: #1890ff;
				margin-bottom: 8px;
			}
			.arrow-icon {
				width: 41px;
				height: 10px;
				margin: 0 15px;
			}
		}
	}
}
</style>
